Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat-fe: 공고폼 임시 저장 기능 구현 #954

Merged
merged 15 commits into from
Dec 28, 2024
Merged

Conversation

github-actions[bot]
Copy link
Contributor

@github-actions github-actions bot commented Dec 16, 2024

Original issue description

목적

공고, 지원서 입력 폼 임시 저장 기능 구현

작업 세부사항

  • 브라우저 API를 활용하여 form 관련 정보를 임시 저장합니다.

참고 사항

  • 해당 기능은 브라우저의 로컬스토리지 기능을 사용합니다.

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!


auto-save-form

closes #953

⚒️ 변경사항

  1. React Testing Library (RTL) 테스트 추가
    • useDashboardCreateFormuseLocalStorageState 훅에 대한 테스트를 강화.
    • 추가된 주요 테스트
      • localStorage 값이 존재하는 경우 이전 작성 데이터를 복원하는 로직 테스트.
      • localStorage 값이 없는 경우 초기값을 설정하고 동작하는지 검증.
      • confirm 호출로 사용자가 선택에 따라 저장된 데이터를 유지 또는 초기화하는 로직 테스트.
  2. Lazy Loading 로직 임시 수정
    • AppRouter에서 발생한 중복 렌더링 문제로 인해 DashboardCreate 페이지의 Lazy Loading을 임시적으로 제거

    • 해당 임포트를 일반적인 동기 방식으로 변경하여 문제를 해결

      import DashboardCreate from '@pages/DashboardCreate';
    • 동적임포트를 사용하면 Confirm 로직이 4번 나타납니다. (예상값은 Strict Mode로 2번)

    • 아래는 동적 임포트 사용시 4번 Confirm 로직이 발생되는 부분 캡쳐

2024-12-24.11.06.36.mov
  1. Mock Handler 수정
    • dashboardHandlers에서 clubId가 누락된 요청을 처리하도록 수정.

      if (!body.startDate || !body.endDate || !body.postingContent || !body.title || !clubId) {
        return new Response(null, { status: 400, statusText: 'The request body is missing required information.' });
      }

💬 논의 사항

  1. 동적 임포트 문제
    1. 이 부분은 Development 환경에서만 발생되는 사항인지 잘 모르겠습니다.
    2. 제 생각엔 React-Router와의 Loading 충돌로 생각되는데, 명확하진 않습니다.
    3. 추후 진행해보고 싶은 사항은 React-Router 버전 업그레이드 이후, React-Router에서 제공하는 Lazy기능을 통해서 해결해보면 어떨까 싶습니다.
    4. 따로 이슈 파보도록 할게요

@github-actions github-actions bot added feature 새로운 기능 frontend 프론트엔드 labels Dec 16, 2024
@lurgi lurgi mentioned this pull request Dec 18, 2024
2 tasks
@lurgi lurgi changed the title feat-fe: 공고, 지원서 입력 폼 임시 저장 기능 구현 feat-fe: 공고폼 임시 저장 기능 구현 Dec 24, 2024
@lurgi lurgi force-pushed the 953-fe-auto-save-form branch from c183a73 to 50a96ec Compare December 24, 2024 02:03
@lurgi lurgi marked this pull request as ready for review December 24, 2024 02:13
Copy link
Contributor Author

1735006390.590399

Copy link
Contributor Author

1735006392.370689

Copy link
Contributor Author

1735006394.880659

Copy link
Contributor

@llqqssttyy llqqssttyy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

작업 고생하셨습니다.
로컬 스토리지에서 불러오는 로직이 깔끔하고 좋았어요. 어프루브 드립니다!

Comment on lines 51 to 60
const [enableStorage] = useState(() => {
const Step = window.localStorage.getItem(LOCALSTORAGE_KEYS.STEP);
const Info = window.localStorage.getItem(LOCALSTORAGE_KEYS.INFO);
const Apply = window.localStorage.getItem(LOCALSTORAGE_KEYS.APPLY);

if (Step || Info || Apply) {
return window.confirm('이전 작성중인 공고기 있습니다. 이어서 진행하시겠습니까?');
}
return false;
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요 흐름 깔끔하네요.👍

Copy link
Contributor

@seongjinme seongjinme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

러기 바쁘신 와중에도 중요한 기능을 새로 구현해 주셔서 감사합니다. localStorage를 이용한 폼 임시 저장 기능은 저도 보면서 많이 공부해야겠어요 😅

안내메시지에 대한 사소한 오타 하나와, 폼 임시 저장과 무관한 로직 상의 의문이 있어 RC로 표기하고 코멘트 드립니다. 시간 괜찮으실 때 살펴주세요 🙏

const Apply = window.localStorage.getItem(LOCALSTORAGE_KEYS.APPLY);

if (Step || Info || Apply) {
return window.confirm('이전 작성중인 공고기 있습니다. 이어서 진행하시겠습니까?');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

멋진 로직에 감탄하던 중 발견한 오타가 😅

Suggested change
return window.confirm('이전 작성중인 공고기 있습니다. 이어서 진행하시겠습니까?');
return window.confirm('이전 작성중인 공고가 있습니다. 이어서 진행하시겠습니까?');

@@ -128,7 +164,7 @@ export default function useDashboardCreateForm(): UseDashboardCreateFormReturn {

const setQuestionPrev = (index: number) => () => {
setApplyState((prevState) => {
if (index > DEFAULT_QUESTIONS.length) {
if (index > DEFAULT_QUESTIONS.length + 1) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어... 이렇게 되면 2번째 사전 질문(index가 4인)을 윗쪽 순서로 옮기는 기능이 작동하지 않을 것 같네요. 아마도 테스트 코드 때문에 이렇게 조정하신 것 같은데, 제 생각엔 오히려 테스트 코드 쪽에 문제가 있는 것 같습니다. 인덱스가 1~4 범위인 경우를 검사하고 있거든요.

@@ -78,7 +79,9 @@ describe('useDashboardCreateForm', () => {

it('인덱스가 1에서 4인 질문은 prev할 수 없다.', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요 테스트 문항이 문제인 것 같아요. 인덱스가 0~3인 질문은 prev 할 수 없다로 고쳐지는 게 맞을 것 같은데... 이전엔 어떻게 이 코드가 통과했었던 것인지 파악이 어렵네요 😓

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그렇네요! 테스트 코드가 잘못되어있었군요🤣🤣🤣🤣
저땐 무슨생각이었을까요🥲

@lurgi lurgi requested a review from seongjinme December 28, 2024 07:52
Copy link
Contributor

@seongjinme seongjinme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

빠른 체크 및 수정에 감사드려요. Approve 드립니다 👍

@lurgi lurgi merged commit 0e0fe44 into fe/develop Dec 28, 2024
25 of 26 checks passed
@lurgi lurgi deleted the 953-fe-auto-save-form branch December 28, 2024 08:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature 새로운 기능 frontend 프론트엔드
Projects
Status: 완료
Development

Successfully merging this pull request may close these issues.

3 participants